<template>
  <div></div>
</template>

<script>
import { mapState } from 'vuex';
import BigNumber from 'bignumber.js';

const toBigNumber = num => {
  return new BigNumber(num);
};

export default {
  props: {
    ethPrice: {
      type: BigNumber,
      default: function () {
        return new BigNumber(0);
      }
    },
    makerActive: {
      type: Boolean,
      default: false
    },
    cdps: {
      type: Array,
      default: function () {
        return [];
      }
    },
    availableCdps: {
      type: Object,
      default: function () {
        return {};
      }
    },
    cdpDetailsLoaded: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loaded: false,
      wethToPethRatio: 0,
      daiPrice: 0,
      priceFloor: 0,
      ethQty: 0,
      daiQty: 0,
      selectedCdp: '',
      cdp: {},
      eth: toBigNumber(0),
      dai: toBigNumber(0),
      debtValue: toBigNumber(0),
      collatRatio: toBigNumber(0),
      pethCollateral: toBigNumber(0),
      usdCollateral: toBigNumber(0),
      ethCollateral: toBigNumber(0),
      ratio: null,
      isSafe: false,
      maxDaiDraw: toBigNumber(0),
      maxPethDraw: toBigNumber(0),
      maxEthDraw: toBigNumber(0)
    };
  },
  computed: {
    ...mapState('main', ['account', 'gasPrice', 'web3', 'network', 'ens']),
    cdpOptions() {
      return this.availableCdps;
    }
  },
  async mounted() {
    if (!this.makerActive) {
      this.$router.push({
        name: 'Maker'
      });
    }
  },
  methods: {
    openManage(cdp) {
      this.$router.push({
        name: 'manage',
        params: {
          cdpId: cdp
        }
      });
    },
    displayPercentValue(raw) {
      if (!BigNumber.isBigNumber(raw)) raw = new BigNumber(raw);
      return raw.times(100).toString();
    },
    displayFixedValue(raw, decimals = 3) {
      if (!BigNumber.isBigNumber(raw)) raw = new BigNumber(raw);
      return raw.toFixed(decimals).toString();
    }
  }
};
</script>

<style lang="scss" scoped>
@import 'SelectCDP';
</style>
